<template>
  <div>
    <h1>App</h1>
    {{ count }}
    <button @click="count++">count++</button>
    <hr>
    <!-- 模版自动解包 -->
    <!-- {{ info.size.w }}
    <button @click="info.size.w++">info.size.w++</button> -->

    <hr>
    <!-- 模版自动解包 -->
    {{ info }}
    <button @click="info = { a: 1, b: 2 }">info={...}</button>
  </div>
</template>
<script setup>
import { ref, shallowRef } from 'vue';

// ref(100)返回的是一个对象
const count = ref(100);
console.log(count);
console.log(count.value);

const info = shallowRef({
  name: 'jack',
  age: 20,
  size: {
    w: 100,
    h: 200
  }
});

console.log(info.value);
console.log(info.value.name);
console.log(info.value.size.w);



</script>
